<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Sprite Genertor</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/css" charset="utf-8">
  <link rel="stylesheet" href="sprite/index.css" type="text/css" charset="utf-8">
</head>
<body>
  <h1>Sprite Genertor</h1>
  <div class="row clear control-group">
    <label for="interval">Interval</label>
    <input class="J_interval" name="interval" type="number" value="10">
    <label for="spriteClass">Sprite Class</label>
    <input class="J_spriteClass" name="spriteClass" type="text" value="sprite">
    <label for="prefix">Prefix</label>
    <input class="J_prefix" type="text" name="prefix">
    <label for="suffix">Suffix</label>
    <input class="J_suffix" type="text" name="suffix">
    <label for="direction">Direction</label>
    <select id="J_direction" class="J_direction" name="direction">
      <option value="horizontal">Horizontal</option>
      <option value="vertical">Vertical</option>
    </select>
    <label for="background">Background Color</label>
    <input class="J_color" type="text" name="color">
  </div>
  <div class="row clearfix">
    <div class="up clearfix">
      <div class="input-area" draggable="true">
        Drop images here or select images
        <input id="J_file" type="file" name="file" accept="image/*" multiple="">
      </div>
      <textarea id="J_CSS" cols="30" rows="10"></textarea>
    </div>
    <div class="canvas-wrapper">
      <canvas class="preview"></canvas>
      <!--<img class="img-preview" src="" alt="">-->
      <a class="download" target="_blank" href="javascript:void 0;">Download</a>
    </div>
  </div>
  <script>
  var script = document.createElement('script');
  script.src = 'http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js';
  if(window.location.search.indexOf('debug') !== -1){
    script.setAttribute('data-main','sprite/index')
  }else{
    script.setAttribute('data-main','sprite/index-min')
  }
  document.body.appendChild(script)
  </script>
</body>
</html>

